<template>
    <div id="Statistical_Into">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>推广链接</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-form ref="form" :model="searchForm" label-width="80px" :inline="true" size="small"
                     class="admin_from">
                <el-form-item label=""
                              :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="searchForm.title" placeholder="请输入小说名称"></el-input>
                </el-form-item>
                <el-form-item label=""
                              :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="searchForm.name" placeholder="请输入推广名称"></el-input>
                </el-form-item>
                <el-form-item label=""
                              :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-select v-model="searchForm.is_delete" placeholder="请选择是否删除" clearable
                               :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                        <el-option label="未删除" value="0"></el-option>
                        <el-option label="已删除" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.start_time"
                                            value-format="yyyy-MM-dd"
                                            style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="1">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.end_time"
                                            value-format="yyyy-MM-dd"
                                            style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    size="small"
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="#"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="推广链接"
                        width="550">
                    <template slot-scope="scope">
                        <div style="display: flex;align-items: center">
                            <span>{{scope.row.url}}</span>
                            <el-button type="primary" plain size="small" @click="tinyurl(scope.row.url)"
                                       style="margin: 0 10px">短
                            </el-button>
                            <img src="../../assets/images/qr.png" alt="" width="30" style="cursor: pointer"
                                 @click="qrUrl(scope.row.url)">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="推广名称">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="小说名称">
                </el-table-column>
                <el-table-column
                        prop="chaps_name"
                        label="推广章节">
                </el-table-column>
                <el-table-column
                        prop="subchaps"
                        label="强制关注章节">
                </el-table-column>
                <el-table-column
                        prop="pernums"
                        label="新增注册用户">
                </el-table-column>
                <el-table-column
                        prop="charge"
                        label="充值金额">
                </el-table-column>
                <el-table-column
                        prop="charge_count"
                        label="充值笔数">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="操作"
                        width="230">
                    <template slot-scope="scope">
                        <p style="text-align: center">
                            <el-button type="primary" plain size="small" @click="edit(scope.row.id)">修改</el-button>
                            <el-button type="info" plain size="small" @click="restore(scope.row.id)"
                                       v-if="scope.row.deleted_at">恢复
                            </el-button>
                            <el-button type="warning" plain size="small" @click="remove(scope.row.id)">删除</el-button>
                        </p>
                    </template>
                </el-table-column>
            </el-table>
            <div class="el-pagination">
                <el-pagination
                        background
                        @size-change="changeSize"
                        @current-change="changeCurrent"
                        :current-page="params.pagenum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="params.pagesize"
                        :total="params.totals"
                        :layout="this.$store.state.paginationLayout">
                </el-pagination>
            </div>
        </el-card>
        <!--            新增或编辑-->
        <el-dialog :title="formTitle" :width="this.$store.state.dialogWidth" :visible.sync="visible">
            <el-row :gutter="20">
                <el-col :span="this.$store.state.elColNum">
                    <el-form ref="form" :model="dataForm" :label-width="this.$store.state.setLabelWidth" size="small">
                        <el-form-item label="推广名称">
                            <el-input v-model="dataForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="强制关注章节">
                            <el-input v-model="dataForm.subchaps"></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="dataForm.msg"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogAffirm" size="small">确 定</el-button></span>
        </el-dialog>
        <el-dialog title="推广短链接" :width="this.$store.state.dialogWidth" :visible.sync="tinyurlVisible">
            <el-row :gutter="20">
                <el-col :span="this.$store.state.elColNum">
                    <el-form ref="form" :model="tinyurldataForm" :label-width="this.$store.state.setLabelWidth"
                             size="small">
                        <el-form-item label="短链接">
                            <el-input v-model="tinyurldataForm.url"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="tinyurlVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="copyLink(tinyurldataForm.url)" size="small">复制链接</el-button></span>
        </el-dialog>
        <el-dialog title="推广链接二维码" :width="this.$store.state.dialogWidth" :visible.sync="qrVisible">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="纯二维码" name="first">
                    <div style="margin: 20px">
                        <img :src="qrImg" alt="" v-if="activeName=='first'">
                    </div>

                </el-tab-pane>
                <el-tab-pane label="图文二维码" name="second">
                    <div v-if="activeName=='second'" style="margin: 20px">
                        <img :src="qrImg" alt="">
                    </div>
                </el-tab-pane>
            </el-tabs>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" @click="switchQr" v-if="activeName=='second'">切换二维码</el-button>
               <el-button type="primary" size="small" @click="download">下载二维码</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
  export default {
    name: "Statistical_Into",
    data() {
      return {
        params: {
          pagenum: 1,
          pagesize: 10,
          totals: 0,
        },
        tableData: [],
        formTitle: '',
        visible: false,
        tinyurlVisible: false,
        qrVisible: false,
        tinyurldataForm: {
          url: '',
        },
        qrDataForm: {},
        dataForm: {
          anid: '',
          btype: 2,
          chaps: '',
          name: '',
          subchaps: '',
          msg: '',
        },
        searchForm: {
          start_time: '',
          end_time: '',
          title: '',
          name: '',
          is_delete: '',
        },
        activeName: 'first',
        qrImg: '',
        linkUrl: '',
        index: 1,
      }
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        let data = {
          page: this.params.pagenum,
          page_size: this.params.pagesize,
          start_time: this.searchForm.start_time,
          end_time: this.searchForm.end_time,
          title: this.searchForm.title,
          name: this.searchForm.name,
          is_delete: this.searchForm.is_delete,
        };
        this.$axios.get("admin/generalize", data).then((res) => {
          this.params.totals = res.data.count;
          this.tableData = res.data.list;
        });
      },
      // 每页显示多少条
      changeSize(val) {
        this.params.pagesize = val;
        this.getList();
      },
      // 当前显示的页数
      changeCurrent(val) {
        this.params.pagenum = val;
        this.getList();
      },
      edit(id) {
        this.$axios.get('admin/generalize/' + id).then((res) => {
          this.dataForm = res.data;
          this.visible = true;
        });
      },
      remove(id) {
        this.$confirm('确定要进行操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.del('admin/generalize/' + id, '').then((res) => {
            this.$message.success('删除成功!');
            this.getList();
          });
        }).catch(() => {

        });
      },
      restore(id) {
        this.$confirm('确定要进行操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post('admin/generalize/restore', {id: id}).then((res) => {
            this.$message.success('回复成功!');
            this.getList();
          });
        }).catch(() => {

        });
      },
      // 确认提交添加或编辑用户
      dialogAffirm() {
        this.$axios.put('admin/generalize/' + this.id, this.dataForm).then((res) => {
          this.$message.success('成功');
          this.getList();
          this.visible = false;
        });
      },
      //短链接
      tinyurl(url) {
        this.$axios.get("admin/generalize/shorten", {value: url}).then((res) => {
          // this.tinyurlVisible = true;
          this.tinyurldataForm.url = res.data.short_url;
          this.copyLink(this.tinyurldataForm.url);
        });
      },
      //复制短链接
      copyLink(data) {
        let url = data;
        let oInput = document.createElement('input');
        oInput.value = url;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象;
        console.log(oInput.value)
        document.execCommand("Copy"); // 执行浏览器复制命令
        this.$message.success('复制成功');
        this.tinyurlVisible = false;
        oInput.remove();
      },
      qrUrl(url) {
        this.linkUrl = url;
        this.activeName = 'first';
        this.index = 1;
        this.pureQr();
      },
      handleClick(tab, event) {
        this.activeName = tab.name;
        if (this.activeName == 'first') {
          this.pureQr();
        } else if (this.activeName == 'second') {
          this.noPurQr();
        }
      },
      //纯二维码
      pureQr() {
        this.$axios.get("admin/common/create_qrcode", {value: this.linkUrl}).then((res) => {
          this.qrVisible = true;
          this.qrImg = res.data.url;
        });
      },
      noPurQr() {
        this.$axios.get("admin/generalize/qrcode", {value: this.linkUrl, index: this.index}).then((res) => {
          this.qrImg = res.data.url;
        });
      },
      switchQr() {
        this.index = this.index + 1;
        this.noPurQr();
      },
      search() {
        this.params.pagenum = 1;
        this.getList();
      },
      download() {
        let url = this.fixedIp + 'admin/common/download?filename=' + this.qrImg;
        window.open(url, '_self');
        this.qrVisible = false;
      },
    }
  }
</script>

<style scoped>

</style>